<template>
  <div class="userstory">
    <nav>
      <div class="ALL">
        全部迭代 <i>(共{{ tableData1.length }}个)</i>
      </div>
      <div class="oncreament" @click="Story">
        新建
        <ul class="section" v-show="showON">
          <li
            v-for="(name, index) in StoryOprition"
            :key="index"
            @click="requestOpration(index)"
          >
            <span></span>{{ name.name }}
          </li>
        </ul>
      </div>
    </nav>
    <div class="table" ref="table">
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="150"
        ></el-table-column>
        <el-table-column
          fixed
          prop="title"
          label="标题"
          width="400"
          title="title"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <span class="status2" v-if="scope.row.status === '2'">已完成</span>
            <span class="status2" v-else-if="scope.row.status === '1'"
              >进行中</span
            >
            <span class="status3" v-else-if="scope.row.status === '3'"
              >未开始</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" label="负责人" width="120">
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="120">
        </el-table-column>
        <el-table-column prop="" label="父工作项" width="120">
        </el-table-column>
        <el-table-column prop="requestType" label="功能需求" width="120">
        </el-table-column>
        <el-table-column prop="storyPoint" label="故事点" width="120">
        </el-table-column>
        <el-table-column prop="startTime" label="创建时间" width="120">
        </el-table-column>
        <el-table-column prop="endTime" label="截止时间" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--用户故事弹框 -->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <header>用户故事</header>
      <hr />
      <f-form
        :model="formdatas"
        ref="formdatas"
        label-width="100px"
        class="demo-ruleForm"
      >
        <form-item
          label="用户故事"
          style="width: 79%"
          :rules="[{ required: true, message: '名称不能为空' }]"
        >
          <form-input
            type="name"
            v-model="formdatas.title"
            autocomplete="off"
            name="title"
          ></form-input>
        </form-item>
        <div class="s">
          <form-item label="项目所属" class="ItemName">
            <form-input
              type="ItemName"
              v-model="projects.name"
              autocomplete="off"
            ></form-input>
          </form-item>
          <form-item
            label="负责人"
            :rules="[{ required: true, message: '负责人不能为空' }]"
          >
            <el-select
              v-model="formdatas.username"
              placeholder="请选择负责人"
              style="width: 90%"
              name="username"
            >
              <el-option
                v-for="username in formdatas.numberValidateForm1"
                :key="username.userId"
                :label="username.username"
                :value="username.username"
              ></el-option>
            </el-select>
          </form-item>
        </div>
        <div class="s">
          <form-item label="开始时间">
            <form-col>
              <form-picker
                type="date"
                placeholder="开始时间"
                v-model="formdatas.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                name="startTime"
              ></form-picker>
            </form-col>
          </form-item>
          <form-item label="结束时间">
            <form-col>
              <form-picker
                type="date"
                placeholder="结束时间"
                v-model="formdatas.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 85%"
                name="endTime"
              ></form-picker>
            </form-col>
          </form-item>
        </div>
        <div class="s">
          <form-item label="优先级" prop="username">
            <el-select
              v-model="formdatas.priority"
              placeholder="请评估优先级"
              style="width: 107%"
              name="priority"
            >
              <el-option
                v-for="(item, index) in formdatas.userpriority"
                :key="index"
                :label="item.pro"
                :value="item.pro"
              ></el-option>
            </el-select>
          </form-item>
          <form-item
            label="故事点"
            style="width: 40%"
            :rules="[
              { required: true, type: 'number', message: '名称不能为空' },
            ]"
          >
            <form-input
              type="number"
              v-model.number="formdatas.storyPoint"
              autocomplete="off"
            ></form-input>
          </form-item>
        </div>
        <div class="s">
          <form-item label="风险">
            <el-select v-model="formdatas.risk" style="width: 107%" name="risk">
              <el-option
                v-for="(denger, index) in formdatas.denger"
                :key="index"
                :label="denger.pro"
                :value="denger.pro"
              ></el-option>
            </el-select>
          </form-item>
          <form-item label="需求类型">
            <el-select
              v-model="formdatas.requestType"
              style="width: 107%"
              name="requestType"
            >
              <el-option
                v-for="(type, index) in formdatas.type"
                :key="index"
                :label="type.pro"
                :value="type.pro"
              ></el-option>
            </el-select>
          </form-item>
        </div>
        <div class="s">
          <form-item label="需求来源">
            <el-select
              v-model="formdatas.demandSources"
              style="width: 107%"
              name="demandSources"
            >
              <el-option
                v-for="(resouce, index) in formdatas.resouce"
                :key="index"
                :label="resouce.pro"
                :value="resouce.pro"
              ></el-option>
            </el-select>
          </form-item>
        </div>
        <form-item label="用户故事描述" prop="desc">
          <form-input
            type="textarea"
            rows="6"
            cols="4"
            v-model="formdatas.describe"
            name="describe"
          ></form-input>
        </form-item>
        <form-item class="submit">
          <form-button type="primary" @click="submitStory('formdatas')"
            >添加用户故事</form-button
          >
        </form-item>
      </f-form>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/Userstory.css";
import { mapState } from "vuex";
import $ from "jquery";
export default {
  data() {
    return {
      //所有用户故事
      tableData1: [],
      //弹出框
      dialogVisible: false,
      showON: false,
      StoryOprition: [{ name: "用户故事" }],
      // 用户故事
      formdatas: {
        title: "",
        ItemName:
          this.$route.query.Itemname || window.localStorage.getItem("Itemname"),
        username: "",
        startTime: "",
        endTime: "",
        //故事点
        storyPoint: null,
        //迭代和用户故事负责人
        numberValidateForm1: [],
        username: "",
        //用户故事优先级
        priority: "",
        userpriority: [
          { pro: "最高" },
          { pro: "较高" },
          { pro: "普通" },
          { pro: "较低" },
          { pro: "最低" },
        ],
        //用户故事风险
        risk: "",
        denger: [{ pro: "高" }, { pro: "中" }, { pro: "低" }],
        //用户故事需求类型
        requestType: "",
        //用户故事来源
        demandSources: "",
        resouce: [
          { pro: "产品规划" },
          { pro: "用户反馈" },
          { pro: "内部需求" },
          { pro: "竞品调研" },
          { pro: "其他" },
        ],
        type: [
          { pro: "技术需求" },
          { pro: "功能需求" },
          { pro: "安全需求" },
          { pro: "体验需求" },
        ],
      },
    };
  },
  inject: ["reload1"],
  computed: { ...mapState("UserStory", ["projects"]) },
  methods: {
    //排序
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
    projectSort() {
      this.tableData1.sort(this.compare("status"));
    },
    //删除用户故事
    handleClick(row) {
      this.$http({
        method: "post",
        url: `userStory/deleteUserStoryById?userStoryId=${row.id}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "删除成功",
              type: "success",
            },
            this.sucess(),
            this.reload1()
          );
        } else {
          this.$message.error("删除失败", this.sucess());
        }
      });
    },
    requestOpration(index) {
      // if (index === 2) {
      this.dialogVisible = true;
      // }
    },
    //添加用户故事
    submitStory(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //获取所有的表单中的内容
          let formdatas = $(".demo-ruleForm").serializeArray();
          //添加用户故事的数据
          let obj = {};
          formdatas.forEach((ele) => {
            if (ele.name !== "ItemName") {
              obj[ele.name] = ele.value;
            }
          });
          obj.projectId = this.projects.id;
          // obj.spurtId = "";
          obj.storyPoint = Number(this.formdatas.storyPoint);
          console.log(obj);
          let url = "userStory/addUserStory";
          this.oncreamentSpurt(url, obj);
        } else {
          return false;
        }
      });
    },
    //添加用户故事
    Story() {
      this.showON = !this.showON;
    },
  },
  mounted() {
    //查询所有的用户故事
    this.$http({
      method: "post",
      url: `userStory/selectUserStoryById?userStoryId=0`,
    }).then(({ data }) => {
      if (data.flag) {
        this.tableData1 = data.data;
        this.projectSort();
      } else {
        console.log(data);
      }
    });
    /* 查询项目成员 */
    this.$http({
      method: "post",
      url: `project/selectUserToProject?projectId=${this.projects.id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.formdatas.numberValidateForm1 = data.data;
      } else {
        console.log(data.data);
      }
    });
  },
};
</script>

<style lang="less" scoped>
::-webkit-input-placeholder {
  font-size: 14px;
}
.el-input--prefix .el-input__inner {
  padding-left: 15px;
}
.el-input--suffix .el-input__inner {
  padding-right: 59px;
}
/deep/.el-input--mini .el-input__inner {
  height: 43px;
  border: 2px solid #ccc;
  line-height: 28px;
  width: 180px;
}
.el-form-item {
  margin-bottom: 10px;
  margin-left: 20px;
}
</style>